<template>
  计数器:{{ count }} $store:{{ $store.state.count }}
  <button @click="$store.state.count++">错误修改</button>
  <button @click="add">同步修改</button>
  <button @click="asyncAdd">异步修改</button>

  <hr />
  getters double:{{ double }} $store:{{ $store.getters.double }}

  <hr />
  a模块: {{ aCount }} b模块:{{ bCount }} c模块:{{ cCount }} h模块:{{ hCount }}
  <hr />

  <button @click="$store.commit('aCount/add', 1)">改a</button>
  <button @click="$store.commit('bCount/add', 1)">改b</button>
  <button @click="$store.commit('aCount/cCount/add', 1)">改c</button>
  <button @click="$store.commit('hCount/add', 1)">改h</button>
</template>
<script>
import { computed } from "vue";
import { useStore } from "./vuex";

export default {
  name: "App",
  setup() {
    const store = useStore();
    function add() {
      store.commit("add", 1);
    }
    function asyncAdd() {
      store.dispatch("asyncAdd", 1).then(() => {
        alert("ok");
      });
    }

    store.registerModule("hCount", {
      namespaced: true,
      state: { count: 100 },
      mutations: {
        add(state, payload) {
          state.count += payload;
        },
      },
    });

    return {
      count: computed(() => store.state.count),
      double: computed(() => store.getters.double),
      aCount: computed(() => store.state.aCount.count),
      bCount: computed(() => store.state.bCount.count),
      cCount: computed(() => store.state.aCount.cCount.count),
      hCount: computed(() => store.state.hCount.count),
      add,
      asyncAdd,
    };
  },
};
</script>
